<template>
  <div>
<van-nav-bar class='title'  title="发布房源"   left-arrow   @click-left="$router.back()"/>
  <van-form @submit="onSubmit">
  <van-field
  class="info"
    label="房源信息"
  />
  <van-field
  class="area"
 placeholder="请输入小区名称"
    label="小区名称"
    right-icon="arrow"
    @click="clickFun"
  ></van-field>
 <div class="zj">
   <van-field
    type="text"
    label="租金"
    placeholder="请输入租金/月"
  />
  <span>￥/月</span>
 </div>
 <div class="zj">
   <van-field
    type="text"
    label="建筑面积"
    placeholder="请输入建筑面积"
     />
      <span>m<sup>2</sup></span>
 </div>
  <van-field
  readonly
  clickable
name="picker"
  :value="value"
  label="户型"
  placeholder="请选择"
   right-icon="arrow"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
  </van-popup>

  <van-field
  readonly
  clickable
  name="picker"
  :value="value"
  label="所在楼层"
   right-icon="arrow"
  placeholder="请选择"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns1"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup>
<van-field
  clickable
  name="请选择"
  :value="value"
  label="朝向"
  placeholder="请选择"

  label-class="房屋标题"
   right-icon="arrow"
    rows="2"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns2"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup>

  <van-field
    rows="2"
    placeholder="请输入标题(例如:整租 小区名 2室 5000元)"
     label="房屋标题"
  />
   <van-field name="uploader" label="房屋图像" >
  <template #input>
    <van-uploader v-model="uploader" />
  </template>
</van-field>
   <van-grid :column-num="5" :border="false"  >
        <van-grid-item class="iconfont icon-yg" text="衣柜" />
        <van-grid-item class="iconfont icon-xyj" text="洗衣机" />
        <van-grid-item class="iconfont icon-ky" text="空调" />
        <van-grid-item class="iconfont icon-trq" text="天然气" />
        <van-grid-item class="iconfont icon-bx" text="冰箱" />
        <van-grid-item class="iconfont icon-nq" text="暖气" />
        <van-grid-item class="iconfont icon-dsj" text="电视" />
        <van-grid-item class="iconfont icon-rsq" text="热水器" />
        <van-grid-item class="iconfont icon-kd" text="宽带" />
        <van-grid-item class="iconfont icon-sf" text="沙发" />
      </van-grid>
  <van-field
    label="房屋描述"
  />
   <van-field
     type="textarea"
    placeholder='请输入房屋描述信息'
    rows="8"
  />
  <div class="fix">
    <van-button  class="quxiao">取消</van-button>
    <van-button  class="submit">提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
export default {
  name: 'HaokeGotorent',

  data () {
    return {
      uploader: [],
      value: '',
      columns: ['一室', '二室', '三室', '四室', '四室+'],
      columns1: ['高楼层', '中楼层', '低楼层'],
      columns2:['东','南','西','北'],
      showPicker: false
    }
  },

  mounted () {

  },

  methods: {
    onSubmit (values) {
      console.log('submit', values)
    },
    clickFun () {
      this.$router.push('/areaname')
    },
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    }

  }
}
</script>

<style lang="less" scoped>
.title{
  background-color:#58b57f ;
}
/deep/ .van-nav-bar__title{
  color: #fff;
}
/deep/ .van-nav-bar__left .van-icon{
  color: #fff;
}
/deep/  .info .van-field__label{
  color:#58b57f;
}
/deep/ .van-field__control{
  color:pink;

}
/deep/ .van-cell__title{
  .van-field__label{
margin-left: 220px;
margin-top: -20px;
  }
}
.zj{
  position: relative;
  span{
    position: absolute;
    top:30%;
    right:10px;
    font-size: 14px;
    color:#9e9e9e;
  }
}
.iconfont{
  font-size: 28px;
  text-align: center;
  margin-top:15px;
}
.fix{
  position: fixed;
  bottom: 0;
  width: 100%;
  left:0;
  display: flex;
  .quxiao{
  flex:1;
color: #58b57f;
}
  .submit{
    flex:1;
    background-color:#58b57f;
    color: #fff;
  }
}

</style>
